import { Popup } from "vant";
import * as vue from "vue";
import { ref, onMounted } from "vue";
import style from "./index.module.less";

interface IOpenPopupParams {
  view: any;
  callBack?: (arg: any) => void;
}
export const openPopup = (params: IOpenPopupParams) => {
  const { view, callBack } = params;
  const dom = document.createElement("div");
  const div = document.body.appendChild(dom);
  div.style.width = "100%";
  div.style.height = "100%";
  const App = {
    setup: () => {
      const showPopup = ref(false);
      onMounted(() => {
        showPopup.value = true;
      });
      const onSubmit = (data: any) => {
        showPopup.value = false;
        callBack && callBack(data);
      };
      const onBack = () => {
        showPopup.value = false;
      };
      const onClosed = () => {
        div.remove();
      };
      return () => {
        const ViewData = view;
        return (
          <Popup
            position="right"
            v-model:show={showPopup.value}
            class={style.uploadPopup}
            style={{ height: "100%", width: "100%" }}
            onClosed={onClosed}
          >
            <ViewData
              onSubmit={onSubmit}
              onBack={onBack}
              class="w-full h-full relative overflow-y-scroll"
            />
          </Popup>
        );
      };
    },
  };
  vue.createApp(App).mount(div);
};

export default {
  openPopup,
};
